
{% extends 'line_base.html' %}
{%block title%}
空气湿度率折线图
{%endblock%}


{%block body%}
  <div id="line"></div>
  <script src="../static/js/humidity_chart.js"></script>
{%endblock%}

{%block js%}
<!--    <script src="../static/js/show_datas.js"></script>-->
    <script>
              var isModalShown = false;

              var modal = document.getElementById('my-modal');

              var closeBtn = document.getElementsByClassName("close")[0];

              var last_text='';

              closeBtn.onclick = function() {
                 modal.style.display = "none";
                 isModalShown = false;
              };

              function show_line_data(){
                $.ajax({
                    url:"/line",
                    success:function(data){
                        for(let i = 0 ; i < data.day.length ; i++) {
                                    data.day[i] = data.day[i].slice(5)
                            }
                        option_line.xAxis.data=data.day
                        option_line.series[0].data=data.air_humidity

                        let water = data.moisture_content[data.moisture_content.length - 1];
                        let bud = data.tender_bud_num[data.tender_bud_num.length - 1];
                        let temp = data.air_temperature[data.air_temperature.length - 1];
                        let humidity = data.air_humidity[data.air_humidity.length - 1];
                        if(water<=0.6 || temp >= 45) {
                            var text=String(data.day[data.day.length - 1]);
                            var audio = new Audio();
                            audio.src = "{{ url_for('static', filename='sound/warn.wav') }}";
                            audio.play();

                            if (water<=0.6) {
                               text=text+"含水率达到"+water+"，请尽快结束萎凋！"
                            }

                            if (temp >= 45) {
                               text=text+"温度达到"+temp+"°C，请及时降温！"
                            }

                            document.getElementById("my-modal").querySelector("p").textContent = text;

                            if(last_text!==text){
                                last_text=text;
                                const xhr = new XMLHttpRequest(); // 创建 HTTP 请求对象
                                xhr.open('POST', '/accept_warn', true); // 发送请求
                                xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
                                xhr.send(JSON.stringify({warn: text})); // 发送数据
                            }

                            modal.style.display = "block";
                            isModalShown = true;
                        }
                        ec_line.setOption(option_line)
                    },error:function(xhr,type,errorThrown){

                    }
                })

              let content = modal.querySelector(".modal-content");
              let isDragging = false;// 是否在移动弹窗
              let positionX = 0; // 点击位置与弹窗左侧的距离
              let positionY = 0; // 点击位置与弹窗顶部的距离

              content.addEventListener("mousedown", function(e) {
                isDragging = true;
                positionX = e.pageX - content.offsetLeft;
                positionY = e.pageY - content.offsetTop;
              });

              document.addEventListener("mousemove", function(e) {
                if (isDragging) {
                  let x = e.pageX - positionX;
                  let y = e.pageY - positionY;

                  content.style.left = x + "px";
                  content.style.top = y + "px";
                }
              });

              document.addEventListener("mouseup", function(e) {
                isDragging = false;
              });

              document.querySelector(".close").addEventListener("click", function() {
                modal.style.display = "none";
              });


              // 移动设备上的 touch 事件
              content.addEventListener("touchstart", (e) => {
                positionX = e.touches[0].clientX - content.offsetLeft;
                positionY = e.touches[0].clientY - content.offsetTop;

                isDragging = true;
              });


              content.addEventListener("touchend", () => {
                isDragging = false;
              });

              content.addEventListener("touchmove", (e) => {
                if (isDragging) {
                  e.preventDefault();

                  const currentX = e.touches[0].clientX - positionX;
                  const currentY = e.touches[0].clientY - positionY;

                  content.style.left = `${currentX}px`;
                  content.style.top = `${currentY}px`;
                }
              });

              // 阻止默认行为和事件冒泡
              content.addEventListener("click", function(e) {
                e.stopPropagation();
              });
              modal.addEventListener("click", function(e) {
                modal.style.display = "none";
              });


              }

              show_line_data();
              setInterval(show_line_data,3000);
              setInterval(function() {
              if (isModalShown) {
                    modal.style.display = "none";
                    isModalShown = false;
                  }
              }, 5000);
    </script>
{%endblock%}
